<template>
  <!-- 会员状态 -->
  <van-popup v-model:show="state.show" position="bottom" round>
    <div class="status-popup-box">
      <ul>
        <li class="item text-blue" @click="handleVerify(true)">通过</li>
        <li class="item text-red" @click="handleVerify(false)">拒绝</li>
      </ul>
      <div class="h-[10px] bg-[#E4E4E4]"></div>
      <div class="item !border-0" @click="state.show = false">取消</div>
    </div>
  </van-popup>
</template>
<script setup lang="ts">
import { reqUpdownPass, reqUpdownReject } from "@/api/apply";
import { toast } from "@/utils/toast";

const props = withDefaults(
  defineProps<{
    id: number | null;
  }>(),
  {}
);

const emit = defineEmits(["update"]);
const state = reactive({
  show: false
});

const open = () => {
  state.show = true;
};

const handleVerify = (flag: boolean) => {
  if (!props.id) return;
  showConfirmDialog({
    title: "",
    message: "确定要" + (flag ? "通过" : "拒绝") + "申请？",
    className: "confirm-dialog",
    beforeClose: async (action: string) => {
      return new Promise<boolean>(async resolve => {
        if (action === "confirm") {
          try {
            if (flag) {
              await reqUpdownPass(props.id!);
              toast.success("申请通过");
            } else {
              await reqUpdownReject(props.id!);
              toast.success("申请拒绝");
            }
            emit("update", props.id, flag);
            state.show = false;
            resolve(true);
          } catch (error) {
            resolve(true);
          }
        } else {
          resolve(true);
        }
      });
    }
  });
};

defineExpose({
  open
});
</script>
<style scoped>
.status-popup-box {
  @apply py-[5px];
}
.status-popup-box .item {
  @apply h-[50px] text-[14px] text-center leading-[50px] border-solid border-b-[1px] border-[#E4E4E4];
}
</style>
